<template>
  <div>
    <div class="layout-box">
      <!-- 标题 -->
      <div class="layout-box-header">
        <i class="icon-layout-box-title" />svg
      </div>
      <!-- 内容 -->
      <div class="layout-box-content">
        <div v-for="(item, index) in svgIconList" :key="index" class="svg-box">
          <svg-icon :icon-class="item" class="mb5" />
          <div class="omit font-size12" :title="item">{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComponentManage',
  components: {},
  data() {
    return {
      svgIconList: []
    }
  },
  mounted() {
    // 默认展示icon下的所有svg图标
    const req = require.context('@/assets/icons/svg', false, /\.svg$/)
    const requireAll = requireContext =>
      requireContext.keys().map(requireContext)
    const reqList = requireAll(req)
    this.svgIconList = reqList.map(function(v, i) {
      return v.default.id.substring(5, v.default.id.length)
    })
    // 默认展示icon下的所有svg图标  end
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.svg-box {
  width: 70px;
  height: 70px;
  padding: 20px 1px 0 1px;
  margin: 0 10px 10px 0;
  display: inline-block;
  border: 1px solid #999;
  text-align: center;
}
</style>
